<script setup lang="ts">
import VirtualList from "./components/VirtualList.vue";
import {onMounted, reactive, toRefs} from "vue";

// 绑定数据
const data = reactive({
  // 列表数据
  listData: [] as Array<{ id: number, value: string }>,
})
const {listData} = toRefs(data)

// 构造列表数据
onMounted(() => {
  for (let i = 0; i < 100000; i++) {
    data.listData.push({
      id: i,
      value: `列表项 ${i}`
    })
  }
})
</script>

<template>
  <virtual-list :list-data="listData" class="virtual-list">
    <template v-slot="{ value }">
      <div>{{ value }}</div>
    </template>
  </virtual-list>
</template>

<style scoped>
.virtual-list {
  height: 300px;
  width: 300px;
  border: 1px solid #999;
}
</style>
